<template>
  <div class="edit-lifespan-form">
    <a-form v-if="record" layout="vertical">
      <a-form-item label="天定寿命">
        <a-input-number v-model:value="form.destinedLifespan" :min="30" :max="200" />
      </a-form-item>

      <a-form-item>
        <a-space>
          <a-button type="primary" @click="handleSubmit">保存</a-button>
          <a-button @click="$emit('cancel')">取消</a-button>
        </a-space>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { message } from 'ant-design-vue'

const props = defineProps({
  record: Object
})

const emit = defineEmits(['success', 'cancel'])

const form = ref({
  destinedLifespan: 75
})

watch(
  () => props.record,
  (newRecord) => {
    if (newRecord) {
      form.value.destinedLifespan = newRecord.destinedLifespan
    }
  },
  { immediate: true }
)

const handleSubmit = () => {
  emit('success')
  message.success('寿命信息已更新')
}
</script>

<style lang="scss" scoped>
.edit-lifespan-form {
  padding: 16px;
}
</style>
